const { resolve } = require('path') //引入path模块,并解构resolve
// 引入插件
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin') // 克隆静态资源使用的插件
module.exports = {
  //入口
  entry: './src/index.js', //相对路径,相对的是命令行工具中的路径
  // 出口
  output: {
    filename: './js/app.bundle.js', // 文件名
    path: resolve(__dirname, '../build'), // 打包后的js文件所处的文件夹
    clean: true, //每次编译出新的代码之后,会删除之前编译的代码
    publicPath: '/', //引入app.bundle.js时 从/开始
  },
  mode: 'production',
  // production 1. 压缩 2. 在硬盘上生成build文件夹 3. 会打包生产环境需要的包
  // development 1. 不会压缩 2. 在内存中生成build 3. 会打包生产和开发都需要的包
  plugins: [
    new HtmlPlugin({
      // 默认情况下,htmlplugin这个插件,会自动在build中生成一个index.html文件.并自动引入打包好的
      // js文件. 但是并不是以我们写的index.html为模板生成

      //定义模板
      template: './public/index.html', //相对的是命令行工具中的路径
    }),

    new CopyPlugin({
      patterns: [
        {
          from: 'public', // 克隆静态资源的起始目录
          to: resolve(__dirname, '../build'), // 克隆静态资源的目标目录
          //   注意: public目录下有index.html文件,但是index.html由htmlplugin处理,copyplugin就不需要处理了,否则会报错. 我们要进行配置,忽略index.html
          globOptions: {
            ignore: ['**/index.html'],
          },
        },
      ],
    }),
  ],

  // 配置ejs-loader. 让ejs模板帮我们自动生成html结构的字符串
  module: {
    rules: [
      {
        test: /\.ejs$/,
        loader: 'ejs-loader',
        options: {
          variable: 'data', // 可以在模板当中使用 data 进行动态渲染. 这个值可以自定义.比如:xxx
          // interpolate: '\\{\\{(.+?)\\}\\}', // 表示使用 {{}} 语法. 我们这里不需要
        },
      },
    ],
  },
  // 解析
  resolve: {
    // 忽略后缀名的配置项, 现在.ejs也可以忽略后缀名了,如果某个文件夹下面有index.js和index.ejs.
    // 引入时写的是 import xxx from '目录/index',则由于.js写在数组前面,所以优先引入js文件.后面就依此类推
    extensions: ['.js', '.json', '.ejs'],

    //配置路径别名:
    alias: {
      '@v': resolve(__dirname, '../src', 'views'),
    },
  },
}
